<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="标题" left-text="返回" left-arrow>
      <template #left>
        <span  class="iconfont iconnew icon-left"></span>
      </template>
      <template #title>
        <div class="search">
          <van-icon @click="$router.push('/search')" name="search" size="18" />
          <span>搜索商品</span>
        </div>
      </template>
      <template #right>
        <!-- <van-icon name="manager-o" /> -->
        <van-icon  @click="show_judge" name="manager-o" size="20" />
      </template>
    </van-nav-bar>
    <!-- 导航 -->
    <van-tabs v-model="curIndex" @click="show_arcticle">
      <!-- 根据数据进行渲染 -->
      <van-tab v-for="item in categoeryList" :title="item.name" :key="item.id">
        <!-- 下拉列表刷新 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset="50"
            :immediate-check="false"
          >
            <newsItem
              @click.native="toPage(item.id)"
              v-for="item in news"
              :key="item.id"
              :obj="item"
            ></newsItem>
            <!-- 新闻列表 -->
            <!-- 循环数据，传递数组对象给子组件newsltem -->
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>


<script>
import newsItem from "@/components/newsltem.vue";
// 在首页引入接口函数，并在created中调用函数保存数据
import { category } from "@/api/common";

import { getNews } from "@/api/news";

// import articleDetail from '../views/articleDetail.vue'
export default {
  components: {
    newsItem,
  },
  data() {
    return {
      categoeryList: [],
      curIndex: 0,
      news: [],
      isLoading: false, //下拉刷新组件控制变量
      loading: false, //下拉加载的变量
      finished: false, //下拉加载
      pageIndex: 1, //当前页数
      pageSize: 10, //数据条数
      // active: "", //导航栏切换
    };
  },
  created() {
    // 获取栏目列表
    category().then((res) => {
      console.log(res);
      this.categoeryList = res.data.data;

      // 在首页引入接口函数并在created接口的成功回调函数中进行调用获取新闻数据
      getNews({
        category: this.categoeryList[this.curIndex].id,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      }).then((res) => {
        this.news = this.news.concat(res.data.data);
        console.log(54, res);
      });
    });
  },
  methods: {
    // 判断如果已登录就跳转到'我的'页否则跳转到登录页
    show_judge(){
      if(localStorage.getItem('hm-token-71')){
        return this.$router.push('/personal')

      }
       this.$router.push('/login')
    },
    // 导航栏切换渲染
    show_arcticle(index) {
      // console.log('有效果');
      //获取到了id的索引
      
      
      this.curIndex=index
       getNews({
        category: this.categoeryList[this.curIndex].id,
      }).then(res=>{
        console.log(102,res);
        this.news=res.data.data
      })
    },
    // 下拉刷新
    onRefresh() {
      console.log(71);
      // 重置数据
      this.news = [];
      (this.pageIndex = 1), (this.finished = false);
      // 实现刷新数据功能,就是重新调用获取一下新闻列表
      this.getNewsList();
    },
    onLoad() {
      console.log(84);
      if (this.news.length == 0) {
        return;
      }
      // 在上拉加载数据函数中，修改parseIndex的值，
      // 然后调用获取新闻列表数据函数，实现加载更多数据功能
      this.pageIndex++;
      this.getNewsList();
    },
    // 新闻列表
    getNewsList() {
      getNews({
        category: this.categoeryList[this.curIndex].id,
        // 获取新闻列表添加两个参数用于实现分页功能
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      }).then((res) => {
        console.log(79, res);

        // 在获取新闻列表的回调函数中，修改this.news的值，修改loading和finished的值
        this.news = [...this.news, ...res.data.data];
        // 数据获取成功后把isLoading修改成false表示刷新
        this.isLoading = false;
        // 在获取新闻列表的回调函数中，修改this.news的值，修改loading和finished的值
        if (res.data.data.length < this.pageSize) {
          this.finished = true;
        }
      });
    },
    // 在事件处理函数中进行页面跳转并传入id
    toPage(id) {
      this.$router.push({
        path: "/articleDetail",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>


<style lang="less" scoped>
.van-nav-bar {
  background-color: red;
  .icon-left {
    font-size: 50px;
    color: #fff;
  }
  .van-icon {
    color: #fff;
  }
  /deep/.van-nav-bar__title {
    width: 60%;
    .search {
      height: 36px;
      line-height: 36px;
      color: #fff;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.3);
    }
  }
}
</style>